<template>
	<div>
		<div class="container">
			<div class="toolbar">
				<a-space>
					<a-button v-permission="191" type="primary" danger @click="add()">
						<plus-outlined />新增表头字段
					</a-button>
				</a-space>
			</div>
			<div class="mt-2">
				<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" children-column-name="children" :default-expand-all-rows="false" :data-source="psSource" :pagination="pagination" :loading="loading" @change="initData">
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'operation' && record.read_only !== 1">
							<a-space>
								<a-button v-permission="192" type="link" @click="edit(record)">
									<edit-outlined />编辑
								</a-button>

								<a-button v-permission="193" type="link" @click="del(record.id)">
									<delete-outlined />删除
								</a-button>
							</a-space>
						</template>
					</template>
				</a-table>
			</div>
		</div>
		<a-modal v-model:visible="visible" :width="500" :title="modalTitle" @ok="save">
			<a-form ref="formRef" :model="formState" v-bind="{ labelCol: { style: { width: '100px' } } }">
				<table cellspacing="0" cellpadding="0" style="width: 100%;">
					<tr>
						<td>
							<a-form-item label="表头名称" name="data_name" :rules="{ required: true, message: '请输入表头名称' }">
								<a-row :gutter="10">
									<a-col :span="24">
										<a-input v-model:value="formState.data_name" />
									</a-col>
								</a-row>
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="表头编码" name="data_key" :rules="{ required: true, message: '请输入表头编码' }">
								<a-row :gutter="10">
									<a-col :span="24">
										<a-input v-model:value="formState.data_key" />
									</a-col>
								</a-row>
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="是否展示" name="show" :rules="{ required: true, message: '请选择是否展示' }">
								<a-row :gutter="10">
									<a-col :span="24">
										<a-switch v-model:checked="formState.show" />
									</a-col>
								</a-row>
							</a-form-item>
						</td>
					</tr>
				</table>
			</a-form>
			<template #footer>
				<a-button type="plain" @click="visible = false">取消</a-button>
				<a-button type="primary" @click="save">确定</a-button>
			</template>
		</a-modal>
	</div>
</template>

<script setup>
import { usePagination } from "vue-request";
import { post } from "../utils/index.js";
import { computed, getCurrentInstance, ref } from "vue";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons-vue";

const visible = ref(false);
const optType = ref(1); // 1新增 2编辑
const formState = ref({});
const formRef = ref();
const { proxy } = getCurrentInstance();
const columns = [
	{
		title: "序号",
		dataIndex: "id",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "字段名称",
		dataIndex: "data_name",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "字段编码",
		dataIndex: "data_key",
		sorter: false,
		width: 150,
		align: "center"
	},
	{
		title: "是否展示",
		dataIndex: "show",
		sorter: false,
		width: 80,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text ? "是" : "否";
		}
	},
	{
		title: "是否默认",
		dataIndex: "read_only",
		sorter: false,
		width: 80,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text === 1 ? "默认字段" : "";
		}
	},
	{
		title: "操作",
		dataIndex: "operation",
		sorter: false,
		fixed: "right",
		width: 100,
		align: "center"
	}
];
const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 650
}));
const psSource = computed(() =>
	(data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		return d;
	})
);
const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const modalTitle = computed(() => {
	return `${optType.value === 1 ? "新增" : "修改"}字段`;
});
const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters };

	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
const add = () => {
	optType.value = 1;
	formRef.value?.clearValidate();
	visible.value = true;
	formState.value = {
		show: true
	};
};

const edit = item => {
	optType.value = 2;
	formState.value = {
		...item,
		show: !!item.show
	};
	visible.value = true;
};

const save = () => {
	const params = { ...formState.value };
	formRef.value.validate().then(() => {
		proxy.$message.destroy();
		params.show = params.show ? 1 : 0;
		post("data/save", params)
			.then(() => {
				proxy.$message.success("提交成功", 1);
				visible.value = false;

				initData();
			})
			.catch(err => {
				proxy.$message.error(err.message || err);
			});
	});
};
const del = id => {
	proxy.$confirm({
		title: "确认提示",
		content: `确定要删除${typeof id === "number" ? "当前" : "选中"}的表头字段吗？`,
		okText: "确认",
		cancelText: "取消",
		onOk() {
			post("data/delete", { id })
				.then(() => {
					proxy.$message.success("删除成功");
					initData();
				})
				.catch(err => {
					proxy.$message.error(err.message || err);
				});
		}
	});
};
const { data, loading, run, current, pageSize, total } = usePagination(params => post("data", { ...params }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});
</script>
<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}
</style>
